<template>
  <el-card>
    <div slot="header" class="card-header">
      <span>{{ this.$route.meta.title }}</span>
      <div class="header-select">
        <i class="el-icon-menu"></i>
        <span>选择项：</span>
        <el-select v-model="selectVal" @change="selectChange">
          <el-option
            v-for="(item, index) in selectOptions"
            :key="index"
            :label="item.title"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-card shadow="never">
      <div slot="header" class="card-header">
        <span>
          {{ selectOptions[selectVal].options[selectValB] }}
        </span>
        <el-select v-model="selectValB" @change="selectChange" size="mini">
          <el-option
            v-for="(item, index) in selectOptions[selectVal].options"
            :key="index"
            :label="item"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>
      <Table :tableData="tableData"></Table>
    </el-card>
  </el-card>
</template>

<script>
import variable from './variable'
import Table from './components/Table'
export default {
  components: {
    Table
  },

  data() {
    return {
      selectVal: 0,
      selectValB: 0,
      tableData: [],
      selectOptions: variable
    }
  },

  created() {
    this.tableRandom()
  },

  methods: {
    randomsort() {
      return Math.random() > 0.5 ? -1 : 1
    },

    selectChange() {
      this.tableRandom()
    },

    tableRandom() {
      let arr = [
        {
          columnA: '北京',
          columnB: '12232',
          columnC: '89',
          columnD: '高',
          columnE: '2020.8.30'
        },
        {
          columnA: '湖北',
          columnB: '12121',
          columnC: '172',
          columnD: '高',
          columnE: '2020.8.30'
        },
        {
          columnA: '广东',
          columnB: '17632',
          columnC: '110',
          columnD: '中',
          columnE: '2020.8.30'
        },
        {
          columnA: '四川',
          columnB: '19764',
          columnC: '212',
          columnD: '高',
          columnE: '2020.8.30'
        },
        {
          columnA: '新疆',
          columnB: '11241',
          columnC: '120',
          columnD: '高',
          columnE: '2020.8.30'
        },
        {
          columnA: '天津',
          columnB: '8976',
          columnC: '80',
          columnD: '高',
          columnE: '2020.8.30'
        },
        {
          columnA: '湖南',
          columnB: '6443',
          columnC: '95',
          columnD: '高',
          columnE: '2020.8.30'
        },
        {
          columnA: '河南',
          columnB: '14231',
          columnC: '270',
          columnD: '高',
          columnE: '2020.8.30'
        },
        {
          columnA: '陕西',
          columnB: '34234',
          columnC: '150',
          columnD: '中',
          columnE: '2020.8.30'
        },
        {
          columnA: '贵州',
          columnB: '7856',
          columnC: '90',
          columnD: '高',
          columnE: '2020.8.30'
        }
      ]
      this.tableData = arr.sort(this.randomsort)
    }
  }
}
</script>

<style lang="scss" scoped></style>
